@import "common.css";
body{
  width: 100%;
  height: 100%;
  background: #D0D4DB;
}
#chat{
  width: 100%;
  height: 100%;
  position: fixed;
  .chat-body{
    width: 1063px;
    height: 886px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
    margin:auto;
    .chat-left{
      width: 340px;
      height: 100%;
      background: #4A4A4A;
      float: left;
      .m-header-box{
        width: 100%;
        height: 114px;
        position: relative;
        .chat-header{
          background-color: #fff;
          width: 74px;
          height: 74px;
          display: block;
          float: left;
          margin:20px;
          border-radius: 50%;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .my-name{
          font-size: 20px;
          color: #FFFFFF;
          letter-spacing: 0;
          display: block;
          float: left;
          line-height: 114px;
        }
        .dot-list{
          font-size: 32px;
          position: absolute;
          top: 29px;
          right: 20px;
          letter-spacing: 3px;
          color:#9B9B9B;
          cursor: pointer;
          height: 35px;
          &:hover{
            .exit{
              display: block;
            }
          }
          .exit{
            display: none;
            position: absolute;
            top: 35px;
            right: -20px;
            width: 80px;
            height: 80px;
            background-color: #fff;
            z-index: 500;
            .exit-btn{
              margin-top: 20px;
              width: 100%;
              display: block;
              text-decoration: none;
              font-size: 14px;
              color: #4A4A4A;
              letter-spacing: 0;
              text-align: center;
              line-height: 60px;
            }
          }
        }
      }
      .search-box{
        width: 296px;
        height: 54px;
        position: relative;
        .search-linkman{
          width: 100%;
          display: block;
          height: 54px;
          background: #585858;
          padding-left: 43px;
          line-height: 54px;
          border: none;
        }
        .layui-icon-search{
          position: absolute;
          top: 15px;
          left: 15px;
          font-size: 24px;
          color:#9B9B9B;
        }
      }
      .tab-g-m{
        height: 54px;
        .cut-btn{
          width: 50%;
          float: left;
          height: 54px;
          background: #9B9B9B;
          font-size: 18px;
          color: #FFFFFF;
          letter-spacing: 0;
          text-align: center;
          line-height: 54px;
        }
        .active{
          font-size: 18px;
          color: #94A5FA;
          letter-spacing: 0;
          text-align: center;
          background: #F3F3F3;
        }
      }
      .link-box{
        width: 100%;
        .link-box-style{
          overflow: hidden;
          float: left;
          width: 100%;
          .list-style{
            width: 338px;
            overflow-y:scroll;
            &::-webkit-scrollbar
            {
              display: none;
              width: 2px;
              height: 16px;
              background-color: #111111;
            }
            /*定义滚动条轨道 内阴影+圆角*/
            &::-webkit-scrollbar-track
            {
              -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
              border-radius: 8px;
              background-color:#000000;
            }
            /*定义滑块 内阴影+圆角*/
            &::-webkit-scrollbar-thumb
            {
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
              background-color: #555;
            }
            .link-object{
              background: #585858;
              cursor: context-menu;
              width: 310px;
              height: 54px;
              padding: 20px 15px;
              .link-obj-header{
                margin-right: 10px;
                background-color: #fff;
                width: 54px;
                height: 54px;
                float: left;
                border-radius: 50%;
                overflow: hidden;
              }
              .rec-inform{
                float: left;
                .ob-name{
                  font-size: 16px;
                  color: #FFFFFF;
                  letter-spacing: 0;
                  line-height: 16px;
                  margin:7px 0 10px;
                  display: inline-block;
                }
                .rec-msg{
                  font-size: 14px;
                  color: #9B9B9B;
                  letter-spacing: 0;
                  line-height: 14px;
                }
              }
              .link-object-r{
                float: right;
                padding: 8px 0 0 0;
                .send-time{
                  display: block;
                  font-size: 14px;
                  color: #9B9B9B;
                  letter-spacing: 0;
                  text-align: right;
                  line-height: 14px;
                  margin-bottom: 8px;
                }
                .msg-num{
                  float: right;
                  width: 21px;
                  height: 21px;
                  border-radius: 50%;
                  display: block;
                  background: #FFBD00;
                  text-overflow: clip;
                  text-align: center;
                  font-size: 10px;
                  color: #FFFFFF;
                  letter-spacing: 0;
                  line-height: 21px;
                }
              }
            }
            .active{
              background: #4A4A4A;
            }
          }
        }
        .link-men-box{
          width: 0;
        }
      }
    }
    .chat-right{
      float: left;
      width: 723px;
      height: 100%;
      background: #F5F5F5;
      .chat-top{
        width: 100%;
        height: 74px;
        border-bottom: 1px solid #D0D4DB;
        .obj-name{
          font-size: 20px;
          color: #6E6E6E;
          letter-spacing: 0;
          text-align: center;
          line-height: 74px;
        }
        .dot-list-s{
          font-size: 32px;
          position: absolute;
          top: 8px;
          right: 20px;
          letter-spacing: 3px;
          color:#9B9B9B;
          cursor: pointer;
          height: 35px;
          &:hover{
            .chat-obj-fun{
              display: block;
            }
          }
          .chat-obj-fun{
            display: none;
            width: 124px;
            height: 140px;
            padding-top: 18px;
            background-color: #fff;
            z-index: 500;
            position: absolute;
            left: -73px;
            top: 41px;
            .fun-obj{
              .fun-obj-d{
                width: 100%;
                a{
                  text-decoration: none;
                  display: block;
                  font-size: 14px;
                  color: #4A4A4A;
                  letter-spacing: 0;
                  text-align: center;
                  line-height: 34px;
                  &:hover{
                    color: #2F5AFF;
                  }
                }
              }
            }
          }
        }
      }
      .chat-area{
        overflow-y: scroll;
        width: 683px;
        height: 497px;
        border-bottom: 1px solid #D0D4DB;
        padding: 67px 20px 0 20px;
        &::-webkit-scrollbar
        {
          display: none;
          width: 2px;
          height: 16px;
          background-color: #111111;
        }
        /*定义滚动条轨道 内阴影+圆角*/
        &::-webkit-scrollbar-track
        {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          border-radius: 8px;
          background-color:#000000;
        }
        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb
        {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
          background-color: #555;
        }
        .send-time-m{
          margin-bottom: 10px;
          .send-time-d{
            background: #D0D4DB;
            border-radius: 10px;
            padding: 0 11px ;
            height: 20px;
            display: table;
            margin: 0 auto;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            line-height: 20px;
          }
        }
        .msg-style{
          display: block;
          overflow: hidden;
          margin-bottom: 10px;
          .s-header{
            background-color: #325633;
            display: block;
            width: 36px;
            height: 36px;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 10px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .msg-con{
            max-width: 60%;
            .obj-name-con{
              font-size: 12px;
              color: #9B9B9B;
              letter-spacing: 0;
              line-height: 12px;
              margin-bottom: 5px;
            }
            .msg-con-d{
              overflow: hidden;
              word-wrap:break-word;
              padding: 5.5px 15px;
              min-width: 25px;
              max-width: 360px;
              min-height: 24px;
              background: #FFFFFF;
              border-radius: 4px;
              font-size: 14px;
              color: #4A4A4A;
              letter-spacing: 0;
              line-height: 24px;
              img{
                max-width: 330px;
                max-height: 500px;
                min-height: 30px;
                min-width: 30px;
              }
              p{
                line-height: 24px;
              }
            }
          }
        }
        .l-send{
          .s-header{
            float: left;
          }
          .msg-con{
            float: left;
          }
        }
        .r-send{
          .s-header{
            float: right;
            margin-left: 10px;
            margin-right: 0;
          }
          .msg-con{
            float: right;
          }
        }
        .no-rec{
          margin-bottom: 10px;
          .send-time-d{
            background: #D0D4DB;
            border-radius: 10px;
            padding: 0 11px ;
            height: 20px;
            display: table;
            margin: 0 auto;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            line-height: 20px;
          }
        }
      }
      .send-part{
        width: 100%;
        height: 248px;
        .layui-layedit{
          border: none;
          .layui-layedit-tool{
            border:none;
          }
        }
        .hint-how-send{
          font-size: 14px;
          color: #D0D4DB;
          letter-spacing: 0;
          line-height: 14px;
          text-align: right;
          margin-right: 20px;
        }
      }
    }
  }
}

.chat-fun {
  display: none;
  .full-shade {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10003;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    /*兼容IE8及以下版本浏览器*/
    filter: alpha(opacity=30);
    display: block;
  }
  .hide-style {
    display: none;
    border-radius: 8px;
    position: fixed;
    z-index: 10004;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .content-white-bg();
    .hide-d-style {
      overflow: hidden;
      display: block;
      position: relative;
      .curse-title {
        font-weight: 600;
        text-align: center;
        font-size: 20px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 20px;
        margin: 40px 0 20px;
      }
      .layui-icon-left{
        position: absolute;
        left: 20px;
        top: 20px;
        .font-size30();
      }
      .layui-icon-close {
        position: absolute;
        right: 20px;
        top: 20px;
        display: block;
        font-size: 30px;
        color: #9B9B9B;
      }
      .del-hint{
        font-size: 14px;
        color: #6E6E6E;
        letter-spacing: 0;
        text-align: center;
        line-height: 14px;
      }
      .sure-btn{
        display: block;
        margin: 0 auto;
        width: 114px;
        height: 40px;
        background: #2F5AFF;
        border-radius: 7px;
        text-decoration: none;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
      }
    }
  }
  .group-detail{
    display: none;
    width: 431px;
    height: 615px;
    .curse-title {
      margin: 40px 0 20px!important;
    }
    .model-style{
      padding-bottom: 20px;
      border-bottom: 2px solid #f8f8f8;
      width: 351px;
      margin:0 auto 20px;
      position: relative;
      .group-number{
        font-size: 14px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 14px;
      }
      .grouper-list{
        overflow: hidden;
        margin-bottom: 10px;
        .grouper{
          float: left;
          margin-right: 25px;
          text-align: center;
          font-size: 12px;
          color: #9B9B9B;
          letter-spacing: 0;
          line-height: 12px;
          .content-font-one();
          .grouper-member{
            width: 36px;
            height: 36px;
            display: block;
            margin-bottom: 5px;
            position: relative;
            img{
              border-radius: 50%;
              width: 100%;
              height: 100%;
              overflow: hidden;
              border: 1px solid #cccccc;
            }
            .iden-group-master{
              width: 36px;
              height: 18px;
              position: absolute;
              bottom: -2px;
              display: block;
              background: #9013FE;
              border-radius: 100px;
              font-size: 10px;
              color: #FFFFFF;
              letter-spacing: 0;
              text-align: center;
              line-height: 18px;
            }
            .iden-group-manger{
              width: 36px;
              height: 18px;
              position: absolute;
              bottom: -2px;
              display: block;
              background: #2F5AFF;
              border-radius: 100px;
              font-size: 10px;
              color: #FFFFFF;
              letter-spacing: 0;
              text-align: center;
              line-height: 18px;
            }
          }
        }
      }
      .check-more{
        display: block;
        clear: both;
        font-size: 12px;
        color: #9B9B9B;
        letter-spacing: 0;
        line-height: 12px;
        text-align: center;
      }
      .in-all{
        position: absolute;
        top: 5px;
        right: 0;
        font-size: 12px;
        color: #9B9B9B;
        letter-spacing: 0;
        text-align: right;
        line-height: 12px;
      }
      .group-ann{
        font-size: 14px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 24px;
        .content-font-less();
      }
    }
    .group-name-h{
      font-size: 17px;
      color: #4A4A4A;
      letter-spacing: 0;
      line-height: 17px;
      margin-bottom: 10px;
    }
    .inline-box{
      margin:0 auto 10px;
      width: 351px;
      p{
        display: inline-block;
      }
      .jump-change-name{
        float: right;
        text-align: right;
        font-size: 14px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 14px;
        cursor: pointer;
      }
      .layui-input-block{
        display: inline-block;
        margin-left: 30px;
        height: 28px;
        vertical-align: middle;
        .layui-form-radioed{
          i{
            color: #2F5AFF;
          }
        }
        .layui-form-radio{
          i{
            &:hover{
              color: #2F5AFF;
            }
          }
        }
      }
    }
    .inline{
      display: inline-block;
      line-height: 17px;
      margin:0;
    }
    .exit-group{
      width: 114px;
      height: 40px;
      display: block;
      margin: 0 auto;
      background: #94A5FA;
      border-radius: 7px;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
      text-decoration: none;
      line-height: 40px;
    }

  }
  .check-grouper{
    display: none;
    width: 431px;
    height: 554px;
    .layui-icon-left{
      position: absolute;
      left: 20px;
      top: 20px;
      .font-size30();
    }
    .check-box{
      width: 339px;
      margin:0 auto 28px;
      position: relative;
      .check-box-g{
        display: inline-block;
        margin-right: 10px;
        width: 260px;
        height: 36px;
        background: #EDEDEE;
        border-radius: 18px;
        border: none;
        padding-left: 36px;
        line-height: 36px;
      }
      .cancel{
        display: inline-block;
        font-size: 14px;
        color: #9B9B9B;
        letter-spacing: 0;
        line-height: 36px;
        text-decoration: none;
      }
      .search-icon{
        position: absolute;
        top: 6px;
        left: 12px;
        font-size: 24px;
      }
    }
    .search-consult{
      display: block;
      width: 339px;
      margin:0 auto;
      .member{
        margin-bottom: 10px;
        .member-box{
          .member-header{
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            margin-right: 15px;
          }
          .member-name{
            display: inline-block;
            font-size: 15px;
            color: #9B9B9B;
            letter-spacing: 0;
            line-height: 36px;
            margin-right: 10px;
          }
          .member-iden-mst{
            vertical-align: middle;
            display: inline-block;
            width: 36px;
            height: 18px;
            background: #9013FE;
            border-radius: 100px;
            font-size: 10px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            line-height: 18px;
          }
          .member-iden-mag{
            vertical-align: middle;
            display: inline-block;
            width: 36px;
            height: 18px;
            background:  #2F5AFF;
            border-radius: 100px;
            font-size: 10px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            line-height: 18px;
          }
        }
      }
    }
  }
  .change-name{
    width: 431px;
    height: 554px;
    display: none;
    .hint-change-nick{
      font-size: 15px;
      color: #4A4A4A;
      letter-spacing: 0;
      line-height: 15px;
      margin-bottom: 15px;
      margin-left: 20px;
    }
    .change-nickname{
      border:none ;
      margin:0 0 0 20px;
      padding: 10px;
      width: 325px;
      height: 15px;
      background: #F8F9FB;
      border-radius: 4px;
      font-size: 15px;
      color: #4A4A4A;
      letter-spacing: 0;
      line-height: 15px;
    }
  }
}